  
<template>
   <div>
        
      <el-button type="text">上一周</el-button>
      <el-button type="text" >下一周</el-button>
        <div style="width: 100%; height: 600px;border:1px solid #fff;position: relative;">
            <!-- 星期 -->
            <ul class="week-ul">
                <li v-for="item in week" :key="item.id">{{item.weekStr}}({{item.dateStr}})</li>
            </ul>
            <!-- 时间段 -->
            <ul class="time-ul">
                <li v-for="item in date" :key="item.id">{{item.dateSection}}</li>
            </ul>
            <!-- 内容 -->
            <ul class="ul-box">
                <li v-for="item in week" :key="item.id">
                    <ul class="date-form-ul">
                        <li v-for="it in date" :key="it.id" style="text-align:center;">
                            <!-- <span v-if="tableData[`${item.id}-${it.id}`]">{{tableData[`${it.id}-${item.id}`].objectName}}</span> -->
                            
                            <div  v-if="tableData[item.id+'-'+it.id]">
                                <span>授课教师：{{tableData[item.id+'-'+it.id].teacherName}}</span>
                                <el-button type="text" @click="editClass(tableData[item.id+'-'+it.id])">修改课时</el-button>
                                <el-button type="text" @click="deleteDio(tableData[item.id+'-'+it.id].classPlanId)">删除课时</el-button>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
             
        </div>
        

   </div>
</template>
  <script> 
    export default {
       
      data() {
          return {
             week: [], // 每周日期
             date: [], // 所有时间段
             tableData: [],
          }
      
    }, 
    watch: {
        
    },
    methods: {
        // 获取所有时间段
        getDate() {
            this.axios({
                method: 'get',
                url: this.url + 'web/train/TrainSetDateSection/getWeekDateList',
                headers: { 'token': this.TOKEN }
            }).then(res => {
                log(res)
                if(res.data.code == 200) {
                    this.date = res.data.data;
                    // this.getWeekClass(res.data.data);
                }
            })
        },
        // 获取当前时间 的一周时间
        getCurrentWeek(date) {
            this.week = [];
            let nowDateTime = date ? new Date(date).getTime() : this.nowDate.getTime() ; 
            let currentWeek = date ? new Date(date).getDay() : this.nowDate.getDay();
            let time;
            for(let i=1; i<8; i++) {
                time = new Date(nowDateTime - (currentWeek-i) * this.oneDayTime);
                this.week.push({
                    dateStr: `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`,
                    weekStr: time.getDay() == 0 ? this.weekArr[6] : this.weekArr[time.getDay()-1],
                    id: time.getDay() == 0 ? 7 : time.getDay()-1
                })
            }
        },
        // 获取当前周排课情况
        getWeekClass(date) {
            date = date || `${this.nowDate.getFullYear()}-${this.nowDate.getMonth()+1}-${this.nowDate.getDate()}`
             
            this.axios({
                method: 'post',
                url: this.url + 'web/train/TrainClassPlanInfo/planWeekClassDayListByTarget',
                data: params,
                headers: { 'token': this.TOKEN }
            }).then(res => {
                log(res)
                if(res.data.code == 200) {
                    this.tableData = res.data.data;
                }
            })
        },
    },
    mounted() {
      this.getDate();
      this.getCurrentWeek();
    }
  }
   
    
  </script> 
   
  